// onload: 当页面载入完毕后执行Javascript代码
window.onload = function(){
    let dataInfo = [{
        name: "安东尼 戴维斯",
        money: 892001
      },
      {
        name: "凯里 欧文",
        money: 668932
      },
      {
        name: "史蒂夫 库里",
        money: 698756
      },
      {
        name: "德里克 罗斯",
        money: 492489
      },
      {
        name: "保罗 乔治",
        money: 853957
      },
      {
        name: "勒布朗 詹姆斯",
        money: 968472
      },
      {
        name: "詹姆斯 哈登",
        money: 718225
      },
      {
        name: "凯文 杜兰特",
        money: 889147
      },
    ];
    // querySelector: 返回匹配的第一个元素
    let addUser = document.querySelector('#add-user');
    let mainBox = document.querySelector('.mainBox');
    let double = document.querySelector('#double');
    let showMillionaire = document.querySelector('#show-millionaire');
    let sort = document.querySelector('#sort');
    let calculate = document.querySelector('#calculate');
    let n = 0;
    // addEventListener: 绑定事件,可以给某一个元素的同一个行为绑定多个函数(方法), 并且会分别执行
    addUser.addEventListener('click',function(){
       if(n < dataInfo.length){
        let text = `
        <div class="left">${dataInfo[n].name}</div>
        <div class="right"><span>$</span>
        <span>${dataInfo[n].money}</span></div>`;
        // createElement：创建一个由标签名称 tagName 指定的 HTML 元素
        let div = document.createElement('div');
        // classList：用于在元素中添加，移除及切换 CSS 类
        div.classList.add('mainLine');
        div.innerHTML = text;
        mainBox.appendChild(div);
        n++;
       }
    })
    double.addEventListener('click',function(){
      let mainLine = document.querySelectorAll('.mainLine');
      console.log(mainLine);
      mainLine = Array.prototype.slice.call(mainLine);
      mainLine.map(function(value,index){
          return value.lastElementChild.children[1].innerHTML=value.lastElementChild.children[1].innerHTML*2;
          // return value.lastElementChild.children[1].innerHTML*2;
      })
    })
    showMillionaire.addEventListener('click',function(){
        let mainLine = document.querySelectorAll('.mainLine');
        mainLine = Array.prototype.slice.call(mainLine);
        mainLine = mainLine.filter(function(value,index){
            return Number(value.lastElementChild.children[1].innerHTML) > 1000000;
        })
        mainBox.innerHTML = '';
        mainLine.forEach(function(value,index){
            mainBox.appendChild(value);
        })
    })
    sort.addEventListener('click',function(){
        let mainLine = document.querySelectorAll('.mainLine');
        console.log(mainLine);
        mainLine = Array.prototype.slice.call(mainLine);
        mainLine.sort(function(a,b){
            return a.lastElementChild.children[1].innerHTML-b.lastElementChild.children[1].innerHTML;
        })
        console.log(mainLine);
        mainBox.innerHTML = '';
        mainLine.forEach(function(value){
            mainBox.appendChild(value);
        })
    })
    calculate.addEventListener('click',function(){
        let mainLine = document.querySelectorAll('.mainLine');
        console.log(mainLine);
        mainLine = Array.prototype.slice.call(mainLine);
        let sumMoney = mainLine.reduce(function(total,current){
            return total + Number(current.lastElementChild.children[1].innerHTML)
        },0)
        let sum = document.querySelector('.sum');
        sum.innerHTML = "$"+sumMoney;
    })
}